<template>
  <div>
    用户名:<input v-model="msg" type="text">
    自我介绍:<textarea v-model="intyo" name="" id="" cols="30" rows="10"></textarea>
     <!-- 在 select 上使用时, 将 option 的 value 属性设置在 select 绑定的数据上了, 可以获取到用户选择的选项 -->
    <!-- 注意事项: 使用 v-model 的时候, 需要给每一个 option 设置 value 属性, v-model 其实就是将用户选择的 option 的value 绑定给了变量 -->
    <select v-model="from">
      <option value="wh">武汉</option>
      <option value="bj">北京</option>
      <option value="sz">深圳</option>
      <option value="sh">上海</option>
      <option value="cd">成都</option>
    </select>
    <!-- 1. 绑定的数据是数组类型, 将 value 属性的值加到数组中 -->
    兴趣爱好:
    <!-- 下面的value里面的就是为了在vue看是否选中到数组里面了给的提示 -->
    <input v-model="hobby" value="smoking" type="checkbox" /> 抽烟
    <input v-model="hobby" value="drink" type="checkbox" /> 喝酒
    <input v-model="hobby" value="hotHead" type="checkbox" /> 烫头
    <br>
    <!--  2. 绑定的数据是非数组类型 (其他类型全部都会隐式转换成 boolean 类型), 将 checked 设置给变量 isAll -->
    全选:
    <!-- checked是默认全选打钩 现在使用
    v-model来判断勾选 -->
    <!-- <input checked type="checkbox"> -->
    <input v-model="isAll" type="checkbox">

  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'维维',
      intyo:'',
      from:'',
      //数组就接受
      hobby: [],
      isAll:true

    }
  }

}
</script>

<style>

</style>